<template>
	<view>
		<text>全局样式及scss/css变量</text>
		<view class="globalTitle global_color">可以直接使用app全局样式</view>
		<view class="globalScssVar">不能直接使用app定义的scss变量及导入app中scss变量</view>
		<view class="globalImportScssVar">scss变量在导入本文件后可用</view>
		<view class="globalCssVar">可以直接使用app中导入定义的css变量</view>
		<view class="uniGlobalScssVar">uni.scss定义的scss变量全局可用</view>
		<view class="uniGlobalImportScssVar">使用导入到uni.scss中全局变量</view>
	</view>
	<navigator open-type="switchTab" url="/pages/index/index">
		<button size="mini" type="default">首页</button>
	</navigator>
</template>

<script setup>
	
	
</script>

<style lang="scss">
	/* 页面样式默认开启scope */
	/* 页面样式自动覆盖全局样式 */
	@import '@/common/css/globalBase.scss';
	.uniGlobalImportScssVar{
		// border: $globalBorder;
		background-color: $globalBackGround;
	}
	.uniGlobalScssVar{
		font-size: $globalFS;
		color: $globalFC;
	}
	.globalImportScssVar{
		border: 1px solid $borderColor; 
	}
	.globalScssVar{
		// border: 1px solid $borderColorApp; 
	}
	.globalCssVar{
		border: 1px solid $borderColor;
		font-size: var(--fs);
		color: var(--fc);
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
